<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>作业</title>
	<style type="text/css">
	/*初始化浏览器默认样式*/
		body,div,ul,li{
			padding:0;
			margin:0;
			list-style: none;
			border:none;
		}
		/*头部导航部分*/
		.header,.nav{
			width: 800px;
			height: 33px;
			font:12px/33px 宋体;
			margin:30px auto;
		}
		.header{
			background:#00ccff;
			color:#ffff02;
			text-align: center;
		}
		.nav{
			background:#cccccc;
			color:#0133ff;
		}
		li{
			float:left;
		}
		.nav ul li a{
			display: inline-block;;
			width: 100px;
			height: 33px;
			text-decoration:none;
			text-align: center;
		}
		.nav ul li a:hover{
			background:#fff;
			color:#000;
		}
		/*中间部分*/
		.con{
			width: 800px;
			border:1px solid #bcbcba;
			margin:30px auto;
		}
		.con-left,.con-right{
			width: 400px;
			height: 250px;
		}
		.con-left{
			background:#66cbff;
			float:left;
		}
		.con-right{
			background:#cdcc00;
			float:left;
		}
		/*中间内容部分*/
		.content{
			width: 800px;
			border:1px solid #bcbcbc;
			margin:30px auto;
		}
		.content-left,.content-cen,.content-right{
			height: 181px;
			float:left;
		}
		.content-left{
			width: 300px;
			background:#f0f;
			border-right:10px solid #989aff;
		}
		.content-cen{
			width: 200px;
			background:#9afe66;
			border-right:10px solid #989aff;
		}
		.content-right{
			width: 280px;
			background:#ff3;
		}
		/*底部部分*/
		.footer{
			width: 800px;
			height: 160px;
			background:#96f;
			border:1px solid #b299c3;
			position:relative;
			margin:30px auto 10px;
		}
		.footer-nav{
			width: 600px;
			height: 40px;
			background:#f0f;
			position:absolute;
			right:0;
			bottom:0;
		}
		.footer-nav ul li a{
			display:inline-block;
			text-decoration:none;
			width: 100px;
			height: 40px;
			font:11px/40px 宋体;
			color:#3b83d5;
			text-align:center;
		}
		.footer-nav ul li a:hover{
			background:yellowgreen;
			color:#fff;
		}
		/*清除页面中所设置的浮动*/
		.clearfix:before,.clearfix:after{
			display:table;
			content:"";
		}
		.clearfix:after{
			clear:both;
		}
		.clearfix{
			*zoom:1;
			}
	</style>
</head>
<body>
	<!-- 头部导航部分 -->
	<div class="header">重点练习列表的属性，看清ul怎么去定义，li又怎么去定义样式，以及div的结构</div>
	<div class="nav clearfix">
		<ul>
						<li><a href="#">公司首页</a></li>
						<li><a href="#">产品介绍</a></li>
						<li><a href="#">媒体介绍</a></li>
						<li><a href="#">留言板</a></li>
						<li><a href="#">最新动态</a></li>
						<li><a href="#">名人名言</a></li>
						<li><a href="#">常见问题</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>			
	</div>
	<div class="header">div简单结构布局</div>
	<!-- 中间部分 -->
	<div class="con clearfix">
		<div class="con-left"></div>
		<div class="con-right"></div>
	</div>
	<div class="header">div左右中结构的实现</div>
	<div class="header">重点练习列表的属性，看清ul怎么去定义样式，li又怎么去定义样式，以及div的结构</div>
	<div class="nav clearfix">
		<ul>
						<li><a href="#">公司首页</a></li>
						<li><a href="#">产品介绍</a></li>
						<li><a href="#">媒体介绍</a></li>
						<li><a href="#">留言板</a></li>
						<li><a href="#">最新动态</a></li>
						<li><a href="#">名人名言</a></li>
						<li><a href="#">常见问题</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>			
	</div>
	<div class="header">div简单结构布局</div>
	<div class="con clearfix">
		<div class="con-left"></div>
		<div class="con-right"></div>
	</div>
	<div class="header">div左右中结构的实现</div>
	<!-- 中间内容部分 -->
	<div class="content clearfix">
		<div class="content-left"></div>
		<div class="content-cen"></div>
		<div class="content-right"></div>
	</div>
	<div class="header">左右结构的头部页面</div>
	<!-- 底部部分 -->
	<div class="footer clearfix">
		<div class="footer-nav">
			<ul>
				<li><a href="#">公司首页</a></li>
				<li><a href="#">产品介绍</a></li>
				<li><a href="#">媒体介绍</a></li>
				<li><a href="#">最新动态</a></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>
	</div>
</body>
</html>